<template>
  <div class="others-main">
    <!-- Suwork -->
    <el-tooltip class="item" effect="dark" placement="top">
      <p slot="content" class="tooltip">
        {{ $t('Suwork简介') }}
      </p>
      <div class="card" :class="activeItem == 'suwork' ? 'active' : ''" @click.stop="openFrom('suwork')">
        <img src="@/icons/suwork.png" alt="" />
        <div class="text">
          <h4>Suwork</h4>
          <p>
            {{ $t('Suwork简介') }}
          </p>
        </div>
      </div>
    </el-tooltip>
    <!-- 百度翻译 -->
    <el-tooltip class="item" effect="dark" placement="top">
      <p slot="content" class="tooltip">
        {{ $t('百度翻译简介') }}
      </p>
      <div class="card" :class="activeItem == 'translate' ? 'active' : ''" @click="openFrom('translate')">
        <img src="@/icons/yi.png" alt="" />
        <div class="text">
          <h4>{{ $t('百度翻译') }}</h4>
          <p>
            {{ $t('百度翻译简介') }}
          </p>
        </div>
      </div>
    </el-tooltip>
    <!-- Sitemap -->
    <el-tooltip class="item" effect="dark" placement="top">
      <p slot="content" class="tooltip">
        {{ $t('Sitemap简介') }}
      </p>
      <div class="card" :class="activeItem == 'sitemMap' ? 'active' : ''" @click="openFrom('sitemMap')">
        <img src="@/icons/sitemap.png" alt="" />
        <div class="text">
          <h4>Sitemap</h4>
          <p>
            {{ $t('Sitemap简介') }}
          </p>
        </div>
      </div>
    </el-tooltip>
    <!-- 关键词排名查询配置 -->
    <el-tooltip class="item" effect="dark" placement="top">
      <p slot="content" class="tooltip">
        {{ $t('站长之家简介') }}
      </p>
      <div class="card" :class="activeItem == 'zhanzhang' ? 'active' : ''" @click="openFrom('zhanzhang')">
        <img src="@/icons/zhanzhang.png" alt="" />
        <div class="text">
          <h4>{{ $t('关键词排名查询配置') }}</h4>
          <p>
            {{ $t('站长之家简介') }}
          </p>
        </div>
      </div>
    </el-tooltip>
    <!-- 词爪 -->
    <el-tooltip class="item" effect="dark" placement="top">
      <p slot="content" class="tooltip">
        {{ $t('词爪简介') }}
      </p>
      <div class="card" :class="activeItem == 'cizhua' ? 'active' : ''" @click="openFrom('cizhua')">
        <img src="@/icons/cizhua.png" alt="" />
        <div class="text">
          <h4>{{ $t('词爪') }}</h4>
          <p>
            {{ $t('词爪简介') }}
          </p>
        </div>
      </div>
    </el-tooltip>
    <!-- 阿里短信 -->
    <el-tooltip class="item" effect="dark" placement="top">
      <p slot="content" class="tooltip">
        {{ $t('阿里短信简介') }}
      </p>
      <div class="card" :class="activeItem == 'ali' ? 'active' : ''" @click="openFrom('ali')">
        <img src="@/icons/ali.png" alt="" />
        <div class="text">
          <h4>{{ $t('阿里短信') }}</h4>
          <p>
            {{ $t('阿里短信简介') }}
          </p>
        </div>
      </div>
    </el-tooltip>
    <div class="card none el-tooltip"></div>
    <div class="card none el-tooltip"></div>
    <BaseDialog :title="dialogTitle" width="60" :dialog-show.sync="dialogShow" footer @submit="saveOthers">
      <el-form class="others" :model="othersForm" :rules="others" label-position="top">
        <!-- Suwork配置 -->
        <div v-if="activeItem == 'suwork'">
          <el-form-item label="Suwork API" :prop="othersForm.baidu_others_account ||
            othersForm.baidu_others_password ||
            othersForm.baidu_others_token
            ? 'baidu_others_password'
            : ' '
            ">
            <el-input v-model="othersForm.suwork_api" class="right" :placeholder="$t('请配置接口地址')" type="text" />
          </el-form-item>
          <el-form-item label="Suwork APPID" :prop="othersForm.baidu_others_account ||
            othersForm.baidu_others_password ||
            othersForm.baidu_others_token
            ? 'baidu_others_account'
            : ' '
            ">
            <el-input v-model="othersForm.suwork_appid" class="left" :placeholder="$t('请输入appid')" type="password" />
          </el-form-item>
          <el-form-item :label="$t('Suwork密钥')" :prop="othersForm.baidu_others_account ||
            othersForm.baidu_others_password ||
            othersForm.baidu_others_token
            ? 'baidu_others_password'
            : ' '
            ">
            <el-input v-model="othersForm.suwork_secret" class="right" :placeholder="$t('请输入密钥')" type="password" />
          </el-form-item>
        </div>
        <!-- 百度翻译配置 -->
        <div v-if="activeItem == 'translate'">
          <el-form-item :label="$t('百度翻译APPID')">
            <el-input v-model="othersForm.baidu_translate_appid" type="password" />
          </el-form-item>
          <el-form-item :label="$t('百度翻译Token')">
            <el-input v-model="othersForm.baidu_translate_token" type="password" />
          </el-form-item>
        </div>
        <!-- sitemap密钥 -->
        <div v-if="activeItem == 'sitemMap'">
          <el-form-item :label="$t('百度密钥')">
            <el-input v-model="othersForm.baidu_sitemap_token" type="password" />
          </el-form-item>
          <!-- <el-form-item label="谷歌密钥">
            <el-input
              v-model="othersForm.google_sitemap_token"
              type="password"
            />
          </el-form-item>
          <el-form-item label="360密钥">
            <el-input
              v-model="othersForm.three_sitemap_token"
              type="password"
            />
          </el-form-item>
          <el-form-item label="搜狗密钥">
            <el-input
              v-model="othersForm.sogou_sitemap_token"
              type="password"
            />
          </el-form-item> -->
        </div>
        <!-- 关键词排名查询配置 -->
        <div v-if="activeItem == 'zhanzhang'">
          <el-form-item :label="$t('自动查询频率')">
            <el-select v-model="othersForm.keywords_search_time">
              <el-option :label="$t('每小时')" value="hour" />
              <el-option :label="$t('每天')" value="day" />
              <el-option :label="$t('每周')" value="week" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('站长之家Token')">
            <el-input v-model="othersForm.chinaz_token" type="password" />
          </el-form-item>
        </div>
        <!-- 词爪配置 -->
        <div v-if="activeItem == 'cizhua'">
          <el-form-item :label="$t('词爪密钥')" :prop="othersForm.cizhua_secret">
            <el-input v-model="othersForm.cizhua_secret" class="right" :placeholder="$t('请输入词爪密钥')" type="password" />
          </el-form-item>
        </div>
        <!-- 阿里云短信配置 -->
        <div v-if="activeItem == 'ali'">
          <el-form-item label="AccessKeyid" :prop="othersForm.ali_access_key_id">
            <el-input v-model="othersForm.ali_access_key_id" class="right" :placeholder="$t('请输入阿里短信AccessKeyid')" />
          </el-form-item>
          <el-form-item label="AccessKeySecret" :prop="othersForm.ali_access_key_secret">
            <el-input v-model="othersForm.ali_access_key_secret" class="right"
              :placeholder="$t('请输入阿里短信AccessKeySecret')" />
          </el-form-item>
          <el-form-item :label="$t('模板Code')" :prop="othersForm.ali_template_code">
            <el-input v-model="othersForm.ali_template_code" class="right" :placeholder="$t('请输入阿里短信模板Code')" />
          </el-form-item>
          <el-form-item :label="$t('签名名称')" :prop="othersForm.ali_sign_name">
            <el-input v-model="othersForm.ali_sign_name" class="right" :placeholder="$t('请输入阿里短信签名名称')" />
          </el-form-item>
        </div>
      </el-form>
    </BaseDialog>
  </div>
</template>

<script>
import systemApi from '@/api/system/system'
// import log from '@/api/log'
export default {
  props: ['data'],
  data() {
    return {
      dialogTitle: '',
      dialogShow: false,
      activeItem: '',
      othersForm: {
        group: this.data.group,
        suwork_api: '',
        suwork_appid: '',
        suwork_secret: '',
        keywords_search_time: '',
        five_baidu_pc: '',
        five_baidu_mob: '',
        haosou_pc: '',
        sougou_mob: '',
        baidu_translate_appid: '',
        baidu_translate_token: '',
        baidu_sitemap_token: '',
        google_sitemap_token: '',
        three_sitemap_token: '',
        sogou_sitemap_token: '',
        cizhua_appid: '',
        cizhua_secret: '',
        chinaz_token: '',
        ali_access_key_id: '',
        ali_access_key_secret: '',
        ali_template_code: '',
        ali_sign_name: ''
      },
      others: {},
      filesData: ''
    }
  },
  created() {
    this.filesData = this.data.children

    this.filesData.forEach(el => {
      if (el.children.length > 0) {
        el.children.forEach(item => {
          if (item.children.length > 0) {
            item.children.forEach(element => {
              this.othersForm[element.title] = element.value
            })
          } else {
            this.othersForm[item.title] = item.value
          }
        })
      } else if (el.children.length == 0) {
        this.othersForm[el.title] = el.value
      }
    })
  },
  methods: {
    openFrom(data) {
      this.activeItem = data
      // this.dialogTitle = data
      switch (data) {
        case 'suwork':
          this.dialogTitle = this.$t('Suwork配置')
          break
        case 'translate':
          this.dialogTitle = this.$t('百度翻译配置')
          break
        case 'sitemMap':
          this.dialogTitle = this.$t('SitemMap配置')
          break
        case 'zhanzhang':
          this.dialogTitle = this.$t('关键词排名查询配置')
          break
        case 'cizhua':
          this.dialogTitle = this.$t('词爪配置')
          break
        case 'ali':
          this.dialogTitle = this.$t('阿里短信')
          break
      }
      this.dialogShow = true
    },
    saveOthers() {
      systemApi.sysUpdate({ ...this.othersForm }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.tooltip {
  width: 300px;
}

.others-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 20px 20px;
}

.card.none {
  padding: 0;
  margin: 0;
  height: 0;
  border: none;
  display: block;
}

.card.active {
  border: solid 1px var(--huocms-com-color-primary);
}

.card {
  cursor: pointer;
  border: solid 1px #eee;
  background-color: #f9f9f9;
  width: calc(25% - 20px);
  margin-bottom: 20px;
  padding: 10px;
  display: flex;
  justify-content: space-between;

  img {
    width: 43px;
    height: 43px;
  }

  .text {
    width: calc(100% - 60px);

    h4,
    p {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
    }

    h4 {
      font-size: 13px;
    }

    p {
      font-size: 13px;
      color: #999;
      line-height: 30px;
    }
  }
}
</style>
